<template>
	<view class="container">
		<u-navbar back-text="首页" :customBack="back" backIconName=" " :backTextStyle="backTextColor"
			backIconColor="#39CCCC" :background="background">
		</u-navbar>
		<u-notice-bar mode="horizontal" :list="noticeList" :duration="5000"></u-notice-bar>
		<!-- swiper -->
		<view class="home u-p-b-0">
			<u-swiper :vertical="false" :list="swiperlist"></u-swiper>
			<view class="u-p-t-20">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in categoryList" :key="index" @click="toList(item.url)">
						<u-image :src="item.image" width="100" height="100"></u-image>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="f7">
			<view class="fw u-m-l-20 u-m-t-30">为你推荐</view>
			<view class="model-box">
				<view class="model-one" @click="click('知乎,百度答题,做作业题目')">
					<view class="model-title">答题</view>
					<view class="model-text">知乎,百度答题,做作业题目</view>
				</view>
				<view class="model-one" @click="click('写代码、写论文，写小说')">
					<view class="model-title">写作</view>
					<view class="model-text">写代码、写论文，写小说</view>
				</view>
				<view class="model-one" @click="click('小红书,抖音,快手等文案创作')">
					<view class="model-title">文案</view>
					<view class="model-text">小红书,抖音,快手等文案创作</view>
				</view>
				<view class="model-one" @click="click('扮演面试官,电影角色等进行场景对话')">
					<view class="model-title">角色</view>
					<view class="model-text">扮演面试官,电影角色等进行场景对话</view>
				</view>
			</view>
			<!-- 首页广告 -->
			<ad unit-id="你自己的微信广告id"></ad>
		</view>
		<!-- 回到顶部按钮 -->
		<view>
			<u-back-top :scrollTop="scrollTop" :mode="modeTop" :bottom="bottomTop" :right="rightTop" :top="top"
				:icon="iconTop" :custom-style="customStyle" :icon-style="iconStyleTop" :tips="tips">
			</u-back-top>
		</view>
		<!-- 弹窗提示 -->
		<u-modal v-model="showTips" confirm-text="开心收下" confirm-color="#8dcdff" show-title="false"
			@confirm="confirTips">
			<view class="slot-content">
				<rich-text :nodes="tipsContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// top
				noticeList: [],
				scrollTop: 0,
				modeTop: 'circle',
				bottomTop: 200,
				rightTop: 40,
				top: 400,
				iconTop: 'arrow-up',
				iconStyleTop: {
					color: '#111',
					fontSize: '36rpx'
				},
				customStyle: {
					backgroundColor: '#fff',
					color: '#111'
				},
				tips: '顶部',
				page: 0,
				pageSize: 20,
				background: this.TopColor,
				backTextColor: {
					'color': '#ffffff'
				},
				categoryList: [{
						name: '壁纸',
						image: '/static/bar/wallpaper_bar.png',
						url: '/pages/wallpaper/index'
					}, {
						name: 'AI去水印',
						image: '/static/remove-bar.png',
						url: '/pages/remove_watermark/index'
					},
					{
						name: 'AI绘画社区',
						image: '/static/bar/blink_bar.png',
						url: '/pages/midjourney/midjourney'
					}, {
						name: '更多工具',
						image: '/static/category.png',
						url: '/pages/index/category'
					},
				],
				swiperlist: [{
					image: 'https://mp-90028e32-7180-4d7a-acc5-73618ebb57c6.cdn.bspapp.com/cloudstorage/6237a85a-5e9a-4eb7-8add-9c949cb44cf0.jpg',
				}, {
					image: 'https://mp-90028e32-7180-4d7a-acc5-73618ebb57c6.cdn.bspapp.com/cloudstorage/35d6f544-2a09-4ac2-ba3d-2e1fab7e5602.jpg',
				}, {
					image: 'https://mp-90028e32-7180-4d7a-acc5-73618ebb57c6.cdn.bspapp.com/cloudstorage/c3f73cfa-8fa9-4611-8585-bcb4c073da13.jpg',
				}, ],
				list: [],
				showTips: false,
				tipsContent: `<div style=" font-size: 12rpx;text-indent: 2em; border-radius: 4rpx;">
				每日登录可获得10积分，积分仅当日有效！您可将积分用于AI对话、去水印等功能。感谢您的支持！</div>`
			}
		},
		onLoad() {
			this.getNoticeText();
		},
		onShow() {
			if (this.$db.userInfo()) {
				const tipsPromise = this.$http.get("/user/getTipsStatus");
				const tips = tipsPromise.then(res => {
					// console.log("res",res)
					if (res.data == true) {
						//提示积分
						this.showTips = true;
					} else {
						this.showTips = false;
					}
				})
			}
		},
		methods: {
			click(text) {
				this.$db.set("text", text)
				this.$common.switchTabTo('/pages/aichat/index')
			},
			back() { // 首页
				uni.navigateBack({
					delta: 2
				})
			},
			confirTips() {
				console.log("开心收下按钮")
				//更新tipsstatus
				this.$http.get("/user/tipsSuccess")
			},
			async getNoticeText() {
				const utilsObject = uniCloud.importObject('utilsObject') // 导入云对象
				const noticeText = await utilsObject.getNoticeText()
				this.noticeList.push(noticeText.data[0].context)
			},
			toList(url) {
				const userInfo = this.$db.userInfo();
				const _this = this
				console.log(url)
				if (url == "/pages/index/category") {
					uni.showModal({
						title: '功能正在建设中',
						content: '敬请期待',
						success: function(res) {
							// todo
						}
					});
				} else if (url == '/pages/midjourney/midjourney') {
					this.$common.switchTabTo(url)
				} else {
					this.$common.navigateTo(url)
				}
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f0f0f0;
		height: 100vh;
	}

	.search-wrap {
		margin: 0 30rpx 0 10rpx;
		flex: 1;
	}

	.grid-text {
		font-size: 20rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.title {
		font-weight: bold;
		font-size: 30rpx;
		padding-bottom: 20rpx;
	}

	.fw {
		font-weight: bold;
	}


	.alert-tips-class {
		display: flex;
		flex-direction: row;
		padding: 20rpx 40rpx;
		margin-top: 20rpx;
		border-radius: 15rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		// height: 400rpx;

		box-sizing: border-box;
		font-size: 24rpx;


	}

	.alert-tips-class u-alert-tips {
		width: 320rpx;
		// box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
		border: none;
	}

	.slot-content {
		padding: 20rpx;

	}

	.model-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 10rpx 20rpx;
	}

	.model-one {
		flex: 40%;
		padding: 15rpx;

		background: linear-gradient(to bottom, #e4f2f7, #a1befa);

		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 20rpx;
		margin-top: 40rpx;
	}

	.u-m-l-20 {
		// text-align: center;
		font-size: 32rpx;
	}

	.model-title {
		font-weight: 600;
		color: #2D2D2D;
		font-size: 28rpx;
	}

	.model-text {
		font-size: 28rpx;
		color: #f6f6f6;
	}
</style>